/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React, {ReactNode, useState, useEffect} from 'react';
import { StyleSheet, View, ImageBackground, Image, Dimensions } from 'react-native';
import AvoidContainer from '../../components/AvoidContainer/AvoidContainer';

const uri = require('../../../assets/grid/background.jpg');
const headUri = require('../../../assets/images/image1.png');
const Page = (): ReactNode => {
  const [height, setHeight] = useState(Dimensions.get('window').height);

  useEffect(() => {
    // 监听屏幕尺寸变化
    const subscription = Dimensions.addEventListener('change', (change) => {
      setHeight(change.window.height);
    });
    // 组件卸载时移除事件监听
    return (): void => {
      subscription.remove();
    };
  }, []);

  return (
    <AvoidContainer>
      <View style={styles.container}>
        {/* 顶部图片 */}
        <ImageBackground
          source={uri}
          style={{
            width: '100%',
            height: height * 0.35,
          }}
          resizeMode="stretch">
          {/* 右下角头像图片 */}
          <Image
            source={headUri}
            style={{
              width: 50,
              height: 50,
              marginTop: height * 0.35 - 25,
              marginLeft: '80%',
          }}
          />
        </ImageBackground>
        {/* 虚线 */}
        <View style={styles.grayArea}>
          <View style={styles.grayLine} />
        </View>
      </View>
    </AvoidContainer>
  );
};

export default Page;
    
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e9e1e1ff',
  },
  grayLine: {
    height: 2, 
    backgroundColor: '#dbd0d0ff', 
    marginTop: '6%', 
    width: '55%'
  },
  grayArea: {
    justifyContent: 'center', 
    width:'100%', 
    height: 50, 
    flexDirection: 'row'
  }
});